<!--应急电话 -->
<template>

	<scroll-view scroll-y @scrolltolower="getList()" @refresherrefresh="getList(true)" :refresher-enabled="true"
		:refresher-triggered="refresherTriggered">
		<view class="body">

			<view v-for="(item,index) in listData" :key="index">
				<view class="item_phone" @click="call(item.telNum)">
					<text class="item_title">{{item.telNum}}</text>
					<view class="item_context">
						<text>{{item.zipCode=="00"?"全国":item.zipCode}}</text>
						<text style="margin-left: 30rpx;">{{item.telType}}</text>
					</view>
				</view>
			</view>
			<view class="get-more" v-show="getMoreStatus">
				<text>正在加载更多。。。</text>
			</view>
		</view>

	</scroll-view>



</template>

<script>
	export default {
		data() {
			return {
				listData: [],
				total: 0,
				refresherTriggered: false,
				getMoreStatus: false,
				current: 1,
			}
		},
		mounted() {
			this.getPhoneList()
		},
		methods: {
			// 加载，刷新
			getList(isRefresh = false) {
				//刷新
				if (isRefresh) {
					this.listData = [];
					this.current = 1;
					this.refresherTriggered = true
					setTimeout(() => {
						this.getPhoneList();
						this.refresherTriggered = false;
					}, 1000)
				} else { //加载更多
					this.getMoreStatus = true;
					this.current++,
						setTimeout(() => {
							this.getPhoneList();
							this.getMoreStatus = false
						}, 1000)
				}
			},


			getPhoneList() {
				this.$api.phoneList({
					'telNum': "",
					'zipName': "",
					'current': this.current,
					'size': 10,
				}).then(res => {
					if (res.data['code'] == 200) {
						console.log(res)
						var data = res.data['data']['records'];
						this.listData = this.listData.concat(data)
						this.total = value.data['data']['total'];
					}
				}).catch(res => {

				});
			},

			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			onNavigationBarButtonTap(e) {
				this.$goBack('./searchP');
			}

		}
	}
</script>

<style lang="scss">
	.body {
		padding: 20rpx;

		.item_phone {
			background-color: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: column;

			.item_title {
				font-size: 32rpx;
				font-weight: 700;
			}

			.item_context {
				margin-top: 20rpx;
				display: flex;

				text {
					font-size: 28rpx;
				}
			}
		}
	}
</style>
